<template name="agreement">
	<view :style="$s.view_color">
		<view class="place-order-agreement">
			<u-checkbox-group placement="column" @change="checkboxChange">
				<u-checkbox shape="circle" :activeColor="$s.theme" name="ok">
				</u-checkbox>
			</u-checkbox-group>
		    <view>
		        <text v-if="startText!==''">{{startText}}</text>
		        <text class="link" @click="showTips(1)">《{{title}}》</text> 和
				<text class="link" @click="showTips(2)">《{{title2}}》</text>
		        <text v-if="endText!==''">{{endText}}</text>
		    </view>
		</view>
		
		<mars-tipsPop :show="tips_pop" :title="title" :content="$c.html_decode(this.content)" @close="tips_pop=false"></mars-tipsPop>
		
		<mars-tipsPop :show="tips_pop2" :title="title2" :content="$c.html_decode(this.content2)" @close="tips_pop2=false"></mars-tipsPop>
		
	</view>
</template>

<script>
	import { mapState } from 'vuex'
	export default {
		name: 'agreement',
		props: {
			title:{
				type:[String],
				default:''
			},
			content:{
				type:[String],
				default:''
			},
			title2:{
				type:[String],
				default:''
			},
			content2:{
				type:[String],
				default:''
			},
			startText:{
				type:[String],
				default:'我已阅读并同意'
			},
			endText:{
				type:[String],
				default:''
			},
		},
		data() {
			return {
				tips_pop:false,
				tips_pop2:false,
			};
		},
		watch: {
		},
		computed: {
			...mapState({
				$s:state => state.$style,
			})
		},
		methods: {
			//弹出提示框
			showTips(s){
				if(s===1){
					this.tips_pop=true
				}else{
					this.tips_pop2=true
				}
				
			},
			checkboxChange(e){
				let status=false
				if(e.length>0) status=true
				this.$emit('change',status)
			}
		}
	};
</script>

<style lang="scss">
	.place-order-agreement {
	    display: -ms-flexbox;
	    display: flex;
	    -ms-flex-align: center;
	    align-items: center;
	    padding: 0 32rpx 32rpx;
	    font-size: 24rpx;
	}
	.place-order-agreement .link {
	    color: var(--view-theme);
	}
</style>
